
<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客文章详情 - 银翼杀手2049风格</title>
    <link rel="stylesheet" href="{% static 'css/detail.css'%}">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <style>
        #disabled-commentbox {
        display: flex;
        height: 50px;
        }
        #disabled-commentbox #user-avatar {
        flex-shrink: 0;
        width: 80px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        #disabled-commentbox #user-avatar img {
            border-radius: 50%;
        }
        #disabled-commentbox #edit {
        flex: 1 1 0%;
        height: 100%;
        border-radius: 6px;
        font-size: 12px;
        color: #9499a0;
        background-color: #f1f2f3;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        #disabled-commentbox #edit button {
        box-sizing: border-box;
        padding: 4px 9px;
        margin: 0px 3px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #00aeec;
        outline: none;
        border: none;
        cursor: pointer;
        font-size: 12px;
    }

        .comment-section {
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#comment-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#comment-input {
    resize: vertical;
    min-height: 100px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
}

#submit-comment {
    align-self: flex-end;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#submit-comment:hover {
    background-color: #218838;
}

.comments {
    list-style: none;
    padding: 0;
}

    .comment-item {
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }

    .comment-item:last-child {
        border-bottom: none;
    }

    .comment-author {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .comment-text {
        margin: 0;
    }


        .comment-container {

            margin: 0 auto;
            margin-top: 40px;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
        }

        .comment {
            display: flex;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .comment-content {
            flex-grow: 1;
        }

        .username {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .level-badge {
            background-color: #ff4444;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .comment-text {
            margin: 5px 0;
            color: #333;
        }

        .comment-meta {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 12px;
        }

        .comment-meta > div {
            margin-right: 15px;
        }

        .reply-button {
            color: #666;
            cursor: pointer;
            font-size: 14px;
        }

        .reply-button:hover {
            color: #ff4444;
        }

        .reply-count {
            color: #ff4444;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="logo">
            <div class="logo-icon">RSS</div>
            <div class="logo-text"><a href="/">博客园</a></div>
        </div>
        <nav class="nav">
            <a href="#" class="nav-item">会员</a>
            <a href="#" class="nav-item">周边</a>
            <a href="#" class="nav-item">众包</a>
            <a href="#" class="nav-item">新闻</a>
            <a href="#" class="nav-item">博问</a>
            <a href="#" class="nav-item">闪存</a>
            <a href="#" class="nav-item">班级</a>
            <a href="#" class="nav-item">赞助商</a>
            <a href="#" class="nav-item">Chat2DB</a>
        </nav>
        <div class="search-bar">
            <input type="text" class="search-input" placeholder="代码改变世界">
        </div>
        <div class="icons">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
                <path d="M17 21v-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2"/>
            </svg>
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/>
                <path d="M9 13h6"/>
                <path d="M9 17h6"/>
            </svg>
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
            </svg>
        </div>
    </div>
    <div class="container">
        <div class="header">
            <h1 class="title glow">{{article.title}}</h1>
            <div class="meta">
                <span>{{article.publish_time}}</span>
                <span>作者：{{article.author}}</span>
                <span>阅读：{{article.views}}</span>
            </div>
        </div>
        <div class="content">
            {{article.content | safe}}
        </div>
        <div class="tags">
            <span class="tag">Python</span>
            <span class="tag">CPython</span>
            <span class="tag">变量机制</span>
            <span class="tag">数据库</span>
        </div>

        <div id="commentbox">
        <!--?lit$549907266$-->
            {% if username %}

                <div class="comment-section">
                <h2>评论</h2>
                <form id="comment-form">
                    <textarea id="comment-input" placeholder="写下你的评论..." maxlength="500"></textarea>
                    <button type="submit" id="submit-comment">提交</button>
                </form>

                </div>

            {% else %}
                  <div id="disabled-commentbox">
                    <div id="user-avatar">
                      <img width="48" height="48" src="//i2.hdslb.com/bfs/face/member/noface.jpg@96w_96h.avif">
                    </div>
                    <!--?lit$549907266$--><div id="edit">
                          <div>请先</div>
                          <button><a href="/login">登录</a></button>
                          <div>后发表评论 (・ω・)</div>
                        </div>
                  </div>
            {% endif%}


            <div id="comments-list" class="comment-container">
                {% for comment in comments%}
                <div class="comment">
                    <div class="avatar"><img src="https://pic.cnblogs.com/face/2784584/20231021222649.png"></div>
                    <div class="comment-content">
                        <div class="username">
                            {{comment.user.username}} <span class="level-badge">LV6</span>
                        </div>
                        <div class="comment-text">
                            {{comment.content}}
                        </div>
                        <div class="comment-meta">
                            <div>{{ comment.comment_time }}</div>
                            <div>👍 31</div>
                            <div>回复</div>
                        </div>
                    </div>
                </div>
                {% endfor %}


            </div>
      </div>

        <div class="background-effect"></div>
    </div>
</body>

<script>
    $(document).ready(function(){

        $("#comment-form").on("submit", function(event){
            event.preventDefault();  // 阻止默认提交

            // 获取表单数据
            let content = $("#comment-input").val()  // 获取评论的内容
            let username = "{{ username }}";

            $.ajax({
                url: "/comments/",
                type: "POST",
                data: {
                    content: content,
                    article_id: "{{ article.id }}"
                },
                success: function(response){
                    if (response.code == 0){

                        // 更新页面

                        let comment = "<div class='comment'>"
                        comment += "<div class='avatar'> <img src='https://pic.cnblogs.com/face/2784584/20231021222649.png'></div>"
                        comment += "<div class='comment-content'><div class='username'>" + username + "<span class='level-badge'>LV6</span></div>"
                        comment += "<div class='comment-text'>" + content + "</div>"
                        comment += "<div class='comment-meta'><div>" + response.data.comment_time + "</div><div>👍 31</div><div>回复</div>"
                        comment += "</div></div>"
                        $("#comments-list").append(comment)

                        $("#comment-input").val("")  // 清空评论框

                    } else{

                    }
                },
                error:function(){
                    alert("提交失败，请重试!")
                }
            })
        })

    })



</script>
</html>